<template>
  <div>
    <div>
      <el-row >
        <el-col :span="24" >
          <div class="grid-content bg-purple-dark"  >
            <van-image
              class="buju"
              round
              width="10rem"
              height="10rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
            <i class="uname" v-for="items in golast" :key="items">&ensp;&ensp;&ensp;&ensp;{{items.uname}}}</i>&ensp;
            <i class="el-icon-edit">申请&ensp;&ensp;&ensp;</i>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 5" :key="item">
          111
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <br>
    </div>
    <div class="qiandao1">
      <el-row>
        <el-col :span="24" class="qiandao666">
          <div class="grid-content bg-purple-dark">
            <div>
              <el-row>
                <el-button
                  type="primary"
                  :plain="true"
                  circle
                  class="wwee"
                  size="200px"
                  @click="open1"
                  :disabled="isDisable"
                >
                  <i class="shangban">打卡签到</i>
                  <br>
                  <br>
                  <i class="time">{{nowTime}}</i>
                </el-button>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowTime: "",
      nowWeek: "",
      nowYear: "",
      nowDay: "",
      golast :[]
      //  value1: new Date(),
      //  let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
      //  value1: this.getDate(year + '年' + month + '月' + date + '日' +  hh + ':' + mm + ':' + ss)

           //  date1 : new Date("2021-10-30-12:54:49")
    };
  },
  methods: {
    open1() {
      this.isDisable=true
      setTimeout(()=>{
        this.isDisable=false
      },10000)
      var y = new Date().getFullYear().toString();
      var m = new Date().getMonth().toString();
      var d = new Date().getDate().toString();
      var date0 = new Date(
        y,
        m,
        d,
        "09",
        "0",
        "0"
      )
       var y = new Date().getFullYear().toString();
      var m = new Date().getMonth().toString();
      var d = new Date().getDate().toString();
      var date2 = new Date(
        y,
        m,
        d,
        "18",
        "0",
        "0"
      )
      var date1 = new Date();
      
      if(date1>date0 && date1<=date2){
          this.$message.error('打卡时间非正常时间段！');
          
      }else{
        this.$message({
        message: "恭喜您，打卡成功！",
        type: "success"
      });
      }
    axios({
  method: 'post',
  url: '/user/${id}',
  data: {
    gotime: this.nowTime,
    userid: '',
  }
});
  this.$axios.get("/")
  .then(res=>{
    console.log(res.data)
    this.golast=res.data.golast
    console.log(this.golast)
  })
    },
  
    currentTime() {
      setInterval(this.getDate, 500);
    },
    getDate() {
      // year + '年' + month + '月' + date + '日' +
      const year = new Date().getFullYear();
      const month =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      const date =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      const hh =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      const mm =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      const week = new Date().getDay();
      this.nowTime =
        year + "-" + month + "-" + date + "-" + hh + ":" + mm + ":" + ss;
      if (week === 1) {
        this.nowWeek = "星期一";
      } else if (week === 2) {
        this.nowWeek = "星期二";
      } else if (week === 3) {
        this.nowWeek = "星期三";
      } else if (week === 4) {
        this.nowWeek = "星期四";
      } else if (week === 5) {
        this.nowWeek = "星期五";
      } else if (week === 6) {
        this.nowWeek = "星期六";
      } else if (week === 27) {
        this.nowWeek = "星期日";
      }
    }
  },
  mounted() {
     this.currentTime();
    this.date1= Date.setHours(9)
  },
  // 销毁定时器
  beforeDestroy: function() {
    if (this.getDate) {
      clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
    }
  }
};
</script>
<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f6f7f8;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-icon-edit {
  font-size: 200%;
  margin-top: 50px;
  float: right;
}
.buju {
  float: left;
}
.uname {
  font-size: 200%;
  float: left;
}
.wwee {
  margin-top: 200px;
  width: 400px;
  height: 400px;
  size: 80px;
}
.qiandao1 {
  margin-top: -60px;
}
.qiandao666 {
  margin-top: -300px;
}
.shangban {
  font-size: 400%;
}
.time {
  font-size: 200%;
  color: #000;
}
.el-carousel__item h3 {
  color: #b7bf99;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #b7bf99;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #b7bf99;
}
</style>